<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/jQuery.min.css">
</head>
<style>
    .box{
        position: relative;
    }
</style>

<body>
    <!-- <div class="box">
        <div class="item active">
            <div>精选</div>
            <div>猜你喜欢</div>
        </div>
        <div class="item">
            <div>精选</div>
            <div>猜你喜欢</div>
        </div>
        <div class="item">
            <div>精选</div>
            <div>猜你喜欢</div>
        </div>
        <div class="item">
            <div>精选</div>
            <div>猜你喜欢</div>
        </div>
        <div class="item">
            <div>精选</div>
            <div>猜你喜欢</div>
        </div>
        <div class="item" style="display:none;">
            <div>精选</div>
            <div>猜你喜欢</div>
        </div>
    </div> -->
    <button class="btn" style="position: fixed;">点击</button>
    <button class="btn1" style="position: fixed;left: 0;top: 50px;">点击jq</button>
    <div class="box" id="ma"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script>
        // jQuery(".item").click(function(){
        //     if(jQuery(this).hasClass("active")) return;
        //     jQuery(".box>.active").removeClass("active");
        //     jQuery(this).addClass("active");
        // })
        // // jQuery.noConflict();
        // // console.log($);
        // jQuery(".item").append(jQuery(`<div>1</div>`));
        // jQuery(".item").after(jQuery(`<div>12</div>`));
        // jQuery(".item").prepend(jQuery(`<span>56</span>`));
        // 练习：使用jQuery实现创建商品数据
        var product = [
            {
                //商品标题
                title: '神火（supfire）C8 强光手电筒远射LED充电式迷你防身骑行户外灯',

                //商品图片
                img: 'https://img13.360buyimg.com/babel/s150x150_jfs/t11890/134/1759806923/172954/aa5d3ffd/5a0716d7N28e82642.jpg.webp',

                //子标签，券或者满减
                subtag: '',

                //是否含有子标签
                isSubtag: false,

                //是否为plus会员
                isPlus: true,

                //plus会员价格
                plusPrice: '55.00',

                //商品价格
                price: '59.00'
            },
            {
                title: '樱格莱 沙发 布艺沙发 大小户型皮沙发现代简约 客厅家具布艺沙发组合整装 可拆洗 米黄色（升级版） 两件套（送抱枕+凳子）',
                img: 'https://img14.360buyimg.com/babel/s150x150_jfs/t20320/4/2174695450/401786/ae68d2c2/5b49c638N75c8d39f.jpg.webp',
                subtag: '满减',
                isSubtag: true,
                isPlus: false,
                plusPrice: '0.00',
                price: '59.00'
            },
            {
                title: 'JaCe 匹鲁 儿童冰丝席 枕套  凉席枕头套 宝宝凉席套含枕头 蓝冰120*65',
                img: 'https://img10.360buyimg.com/babel/s150x150_jfs/t17902/143/2285690924/215845/81c23e58/5aebd174Nf7d4580f.jpg.webp',
                subtag: '',
                isSubtag: false,
                isPlus: false,
                plusPrice: '0.00',
                price: '199.00'
            },
            {
                title: '来一客99朵红玫瑰生日花束鲜花速递同城全国表白求婚北京上海广州深圳成都重庆西安天津送花店 99朵红玫瑰女神款',
                img: 'https://img12.360buyimg.com/babel/s150x150_jfs/t14251/176/2258904398/450102/523e9427/5a90d11fNf560bd5d.jpg.webp',
                subtag: '券',
                isSubtag: true,
                isPlus: false,
                plusPrice: '0.00',
                price: '288.00'
            },
            {
                title: '车丽友 全包围丝圈汽车脚垫 大众新途观L科鲁泽荣威i5I6宝来雷凌缤智XRV英朗福睿斯科沃兹缤越哈弗M6F7H4定制',
                img: 'https://img10.360buyimg.com/babel/s150x150_jfs/t10189/269/1629168594/250600/b8ab8e57/59e468e0Nb25ce7d0.jpg.webp',
                subtag: '',
                isSubtag: false,
                isPlus: true,
                plusPrice: '210.00',
                price: '218.00'
            },
            {
                title: '【赞商品】李宁 LI-NING CBA联赛官方比赛篮球室内外PU材质7号蓝球儿童成人lanqiu 443-1',
                img: 'https://img11.360buyimg.com/babel/s150x150_jfs/t23944/175/1413376765/911519/48fd00a3/5b601a27Nd03120a1.jpg.webp',
                subtag: '券',
                isSubtag: true,
                isPlus: false,
                plusPrice: '0.00',
                price: '79.00'
            },
            {
                title: '神火（supfire）C8 强光手电筒远射LED充电式迷你防身骑行户外灯',
                img: 'https://img13.360buyimg.com/babel/s150x150_jfs/t11890/134/1759806923/172954/aa5d3ffd/5a0716d7N28e82642.jpg.webp',
                subtag: '',
                isSubtag: false,
                isPlus: true,
                plusPrice: '55.00',
                price: '59.00'
            },
            {
                title: '樱格莱 沙发 布艺沙发 大小户型皮沙发现代简约 客厅家具布艺沙发组合整装 可拆洗 米黄色（升级版） 两件套（送抱枕+凳子）',
                img: 'https://img14.360buyimg.com/babel/s150x150_jfs/t20320/4/2174695450/401786/ae68d2c2/5b49c638N75c8d39f.jpg.webp',
                subtag: '满减',
                isSubtag: true,
                isPlus: false,
                plusPrice: '0.00',
                price: '59.00'
            },
            {
                title: '拜杰（BJ）油壶玻璃防漏油瓶醋瓶调味瓶厨房用品创意调料瓶大号500ML四件套 CP-187',
                img: 'https://img20.360buyimg.com/babel/s150x150_jfs/t1/40857/27/8782/190583/5d22e71aEf4944b93/e8f131f54c60e2f2.jpg.webp',
                subtag: '',
                isSubtag: false,
                isPlus: false,
                plusPrice: '0.00',
                price: '25.90'
            },
            {
                title: '车丽友 全包围丝圈汽车脚垫 大众新途观L科鲁泽荣威i5I6宝来雷凌缤智XRV英朗福睿斯科沃兹缤越哈弗M6F7H4定制',
                img: 'https://img10.360buyimg.com/babel/s150x150_jfs/t10189/269/1629168594/250600/b8ab8e57/59e468e0Nb25ce7d0.jpg.webp',
                subtag: '',
                isSubtag: false,
                isPlus: true,
                plusPrice: '210.00',
                price: '218.00'
            }
        ];
        product.forEach(function(item){
            jQuery(".box").append(jQuery(`
                <div class="item">
                    <div class="item-img">
                        <img src="${item.img}" alt="">
                    </div>
                    <div class="item-title">${item.title}</div>
                    <div class="item-footer">
                        <div class="price" ${item.isPlus?`style="text-decoration:line-through`:""} ">￥${item.price}</div>
                        <div class="red" style="display:${item.isPlus?"block":"none"}">￥${item.plusPrice}</div>
                        <div class="red" style="display:${item.isSubtag?"block":"none"}">${item.subtag}</div>
                    </div>
                </div>
            `));
        });
        //移除，替换，克隆
        jQuery(".btn").click(function(){
            // jQuery(".box").replaceWith("<div>1</div>");
            // jQuery(".box").remove();
            // console.log(jQuery(jQuery(".box")[0].cloneNode()));
            jQuery("body").append(jQuery(jQuery(".box")[0].cloneNode(true)));
        });
        jQuery(".btn1").click(function(){
            jQuery("body").append(jQuery(".box").clone(true));
        });
        jQuery(".box").click(function(){
            console.log("1111");
        });
        console.log(jQuery(".item"));
        var items = jQuery(".item");
        console.log(items.eq(jQuery(".item").length-1));
        console.log(jQuery(".item-footer").eq(0).parents());
        console.log(jQuery(".item-footer").eq(0).siblings());
        console.log(jQuery(".item-footer").eq(0).last());
        // $(".box").fadeOut("slow");
        $(".btn").click(function(){
            jQuery(".box").css({
                position: "relative"
            })
            console.log($(".item").eq(0).offsetParent());
            $(".item").eq(0).offsetParent().css("background-color","red");
        });
    </script>
</body>

</html>